<template>
  <div class="wrap" id="question" :style="{ height: pHeight }">
    <div class="title">核医学人员状况调查</div>
    <div class="content">
      <div class="backgroud1"></div>
      <div class="question">
        <div class="q-number">第{{ curIndex + 1 }}/{{ questionLen }}题</div>
        <div class="q-title">
          Q{{ curIndex + 1 }}:{{ curQuestion.quContent }}
        </div>
        <div class="q-option" ref="option">
          <div
            class="q-item "
            :class="{
              check: answer[curIndex].selectItem.includes(item.answerId),
            }"
            v-for="(item, index) in curQuestion.answer"
            :key="item.answerId"
            @click="selectAnswer(item.answerId)"
          >
            <div class="q-no">{{ (index + 1) | filterId }}.</div>
            <div class="q-itmcom">{{ item.allOption }}</div>
            <div
              class="q-check"
              v-show="answer[curIndex].selectItem.includes(item.answerId)"
            >
              √
            </div>
          </div>

          <div class="q-button">
            <mt-button
              class="q-btn"
              type="primary"
              style="margin-right:20px;"
              :disabled="curIndex == 0"
              @click="handlePrev()"
              >上一题</mt-button
            >
            <mt-button
              class="q-btn"
              type="primary"
              style="margin-left:20px;"
              v-show="curIndex < indexList.length - 1"
              @click="handleNext()"
              >下一题</mt-button
            >
            <mt-button
              class="q-btn"
              style="margin-left:20px;"
              type="primary"
              v-show="curIndex >= indexList.length - 1"
              @click="handleSubmit"
              >提交问卷</mt-button
            >
          </div>
        </div>
      </div>
    </div>
    <mt-popup
      v-model="popupVisible"
      popup-transition="popup-fade"
      class="propup"
    >
      <div class="finish">
        <div>问卷已提交成功</div>
        <div>感谢您的参与</div>
      </div>
      <div class="logout">
        <mt-button type="primary" class="logbtn" @click="back">返回</mt-button>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  name: "Home", // 登录
  components: {},
  data() {
    return {
      pHeight: "100%",
      indexList: [],
      curQuestion: {},
      curIndex: 0,
      answer: [], // 保存做题信息
      popupVisible: false,
      currentAnswer: {}, //选择的问卷
    };
  },
  created() {
    this.currentAnswer = this.$store.state.currentAnswer;

    this.getQuestionTileIndex();
  },
  computed: {
    questionLen() {
      return this.indexList.length;
    },
  },
  filters: {
    filterId(val) {
      const obj = {
        1: "A",
        2: "B",
        3: "C",
        4: "D",
        5: "E",
        6: "F",
        7: "G",
        8: "H",
        9: "I",
        10: "J",
        11: "K",
        12: "L",
      };
      return obj[val];
    },
  },
  mounted() {
    this.$nextTick(() => {
      let pageInfo = this.getWindowConfig();
      this.pHeight = pageInfo.windowHeight + "px";
    });
  },
  methods: {
    getWindowConfig() {
      let windowWidth = window.innerWidth;
      let windowHeight = window.innerHeight;
      if (typeof windowWidth !== "number") {
        if (document.compatMode === "CSS1Compat") {
          windowWidth = document.documentElement.clientWidth;
          windowHeight = document.documentElement.clientHeight;
        } else {
          windowWidth = document.body.clientWidth;
          windowHeight = window.body.clientHeight;
        }
      }
      return {
        windowWidth: windowWidth,
        windowHeight: windowHeight,
      };
    },
    // 获取问卷题号
    getQuestionTileIndex() {
      try {
        this.indexList = this.currentAnswer.list.map((item) => item.questionId);
        if (this.currentAnswer.recordId) {
          // 对已作答的题目进行回显
          this.answer = this.indexList.map((item, index) => {
            return {
              id: item,
              selectItem:
                this.currentAnswer.answerList[index]
                  ?.split("-")
                  .map((k) => Number(k)) || [],
            };
          });
          this.curIndex = this.currentAnswer.answerList.length;
         
        } else {
          // 未作答过的问卷
          this.answer = this.indexList.map((item) => {
            return {
              id: item,
              selectItem: [],
            };
          });
          this.curIndex = 0;
        }
        
        this.getTitle(this.indexList[this.curIndex]);
      } catch (err) {
        this.$router.push("./");
      }
    },
    // 获取题目
    getTitle(id) {
      this.$axios
        .post("/web/getQuestion", {
          questionId: id,
        })
        .then((res) => {
          this.curQuestion = res.list;
        });
    },
    // 选择答案
    selectAnswer(answerId) {
      if (!this.answer[this.curIndex].selectItem.includes(answerId)) {
        this.answer[this.curIndex].selectItem.push(answerId);
      } else {
        this.answer[this.curIndex].selectItem.remove(answerId);
      }
    },
    // 下一题
    handleNext() {
 
      this.handleSubmit(() => {
        this.$refs.option.scrollTop = 0;
        this.curIndex++;
        this.getTitle(this.indexList[this.curIndex]);
      });
    },
    // 上一题
    handlePrev() {
      this.curIndex--;
      this.$refs.option.scrollTop = 0;
      this.getTitle(this.indexList[this.curIndex]);
    },
    handleSubmit(callBack) {
      
      if (
        this.answer[this.curIndex].selectItem.length == 0 
      ) {
        Toast({
          message: "请选择调查选项",
          duration: 1500,
        });
        return;
      }
      let ansStr = this.answer
      
        .slice(0, this.curIndex + 1)
        .map((item) => {
          return item.selectItem.join("-");
        })
        .join(",");

      let params = {
        
        
        userId: this.$store.state.userInfo.userId,
        examId: this.currentAnswer.examId,
        userAnswers: ansStr,
        usertQuestions: this.indexList.slice(0, this.curIndex + 1).join(","),
      };
     
      // 未提交的答题标记
      if (this.currentAnswer.recordId) {
        params.recordId = this.currentAnswer.recordId;
      }
      if (this.curIndex === this.indexList.length - 1) {
        // 回答完成
        params.status = 2;
      } else {
        // 未完成回答
        params.status = 1;
      }

      this.$axios.post("/web/getSubmit", params).then((res) => {
        if (res.code == 200) {
          this.currentAnswer.recordId = res.recordId
          if (this.curIndex === this.indexList.length - 1) {
            // 答题完毕
            this.popupVisible = true;
          } else {
            callBack && callBack();
          }
        } else {
          Toast({
            message: "提交失败",
            duration: 1500,
          });
        }
      });
    },
    back() {
      this.$store.commit("set_is_back");
      this.$router.push("./select");
    },
  },
};
</script>
<style scoped lang="scss">
@import "~@/assets/style/base.scss";
.wrap {
  width: 100vw;
  height: 736px;
  background: url("~@/assets/img/index_background.png") no-repeat;

  background-size: 100% 100%;
  padding: 10% 20px 0;
  box-sizing: border-box;
  overflow: hidden;
  .propup {
    width: 75%;
    height: 50%;
    border-radius: 10px;
    background: url("~@/assets/img/finish_background.png") no-repeat;
    background-size: 100% 100%;

    .finish {
      margin-top: 65%;
      text-align: center;
    }
    .logout {
      margin-top: 10px;
      display: flex;
      justify-content: center;
      .logbtn {
        width: 70%;
        border-radius: 20px;
      }
    }
  }
}
.title {
  padding: 8px 0;
  width: 60%;
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}
.content {
  margin-top: 10%;
  position: relative;
  width: 100%;
  height: 85%;
}
.backgroud1 {
  width: 100%;
  height: 90vh;
  border-radius: 12px;
  background: linear-gradient(to bottom, #a9c6fd 0%, #fff 100%);
  position: absolute;
  top: 0;
  left: -4vw;
  transform: rotate(6deg);
}
.question {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: #fff;
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  padding: 15% 4% 0 5%;
  box-sizing: border-box;
  &::before {
    content: "";
    width: 9vw;
    height: 5vh;
    position: absolute;
    top: -2px;
    left: 20px;
    background: url("~@/assets/img/flag.png") no-repeat;
    background-size: 100% 100%;
  }
  .q-number {
    position: absolute;
    top: 10px;
    right: 20px;
    color: #ee9647;
  }
  .q-title {
    color: #000;
    line-height: 1.5;
  }
  .q-option {
    height: 86%;
    overflow-y: auto;
    padding-right: 1.6vw;

    .q-item {
      display: flex;
      width: 100%;
      border: 1px solid #a1abbd;
      border-radius: 5px;
      box-sizing: border-box;
      padding: 3%;
      color: #a1abbd;
      margin-top: 5%;
      &.check {
        border: 1px solid #407dfd;
        color: #407dfd;
        transition: 0.5s;
        .q-check {
          font-weight: bold;
          text-align: right;
          display: flex;
          align-items: center;
        }
      }
      .q-no {
        width: 7%;
        text-align: left;
        line-height: 1.5;
      }
      .q-itmcom {
        width: 90%;
        line-height: 1.5;
      }
    }
  }

  .q-button {
    margin: 6% 0 5px;
    display: flex;
    .q-btn {
      flex: 1;
    }
  }
}
</style>
